
//获取桌面 并请求数据
var content = document.querySelector('#content')
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://chst.vip:1902/students/getstulist')
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        // console.log(xhr.responseText)
        var x = JSON.parse(xhr.responseText).data
        console.log(x)
        var html2 = ""
        x.forEach(item => {

            html2 += ` <div class="tip1" id="cc" value=${item.id}>
            <div class="tip_h" title="双击关闭纸条">
                <div class="num">第[${item.id.substr(length - 4, 4)}]条 ${item.time}</div>
                <div class="close" title="关闭纸条">×</div>
                <div class="clr"></div>
            </div>
            <div class="tip_c">
                ${item.content}
            </div>
            <div class="tip_f">
                <div class="icon">
                    <img src="images/bpic_1.gif" alt="" title="">
                </div>
                <div class="name">${item.name}</div>
                <div class="clr"></div>
            </div>
        </div>`
        });
        // console.log(html2)
        content.innerHTML = html2
        //获取所有的纸条
        var cc = document.querySelectorAll('#cc')
        console.log(cc)
        //对cc集合遍历，获得每一个cc

        cc.forEach((itemc) => {

            // console.log(itemc)
            // console.log(Math.random())
            itemc.style.position = "absolute"
            itemc.style.left = Math.random() * 733 + 'px'
            itemc.style.top = Math.random() * 446 + 'px'
            //给所有的标签添加按下移动事件
            //计算得到content在body左，上的距离
            var xx = (window.innerWidth - content.offsetWidth) / 2
            var yy = (window.innerHeight - content.offsetHeight) / 3
            itemc.onmousedown = function (e) {
                var ofx = e.offsetX
                var ofy = e.offsetY
                content.onmousemove = function (e) {
                    var pgx = e.pageX
                    var pgy = e.pageY
                    let movex = pgx - ofx - xx
                    let movey = pgy - ofy - yy
                    //规定所有标签的移动范围
                    if (movex < 0) {
                        movex = 0
                    }
                    if (movey < 0) {
                        movey = 0
                    }
                    if (movex > 733) {
                        movex = 733
                    }
                    if (movey > 446) {
                        movey = 446
                    }
                    itemc.style.left = movex + 'px'
                    itemc.style.top = movey + 'px'
                }
            }

            itemc.onmouseup = function () {
                content.onmousemove = null
            }
            //标签添加点击优先级最高事件
            itemc.onclick = function () {
                itemc.style.zIndex = 2
            }

        })
        //获取所有的差号并遍历  添加删除功能
        var close = $('.close')
        close.click(function () {
            //    console.log($(this).index('.close'))
            var suoyin = $(this).index('.close')

            if (!window.confirm('是否确认删除')) {
                alert('删除失败')
                return
            }
            cc[suoyin].style.display = 'none'

            var idzhi = cc[suoyin].getAttribute('value')

            var xhrdel = new XMLHttpRequest()
            xhrdel.open('get', `http://chst.vip:1902/students/del?id=${idzhi}`)
            xhrdel.send()
            xhrdel.onreadystatechange = function () {
                if (xhrdel.status === 200 && xhrdel.readyState === 4) {
                    console.log(xhrdel.responseText)
                    window.confirm('删除成功')
                    location.reload()

                }
            }
        })
        //双击头部，删除功能
        var heade = $('.tip_h')
        //    console.log(heade)
        heade.dblclick(function () {
            console.log($(this).index('.tip_h'))
            var suoyin2 = $(this).index('.tip_h')
            // window.confirm('是否确认删除') 
            if (!window.confirm('是否确认删除')) {
                alert('删除失败')
                return
            }
            cc[suoyin2].style.display = 'none'
            var idzhi2 = cc[suoyin2].getAttribute('value')

            var xhrdel2 = new XMLHttpRequest()
            xhrdel2.open('get', `http://chst.vip:1902/students/del?id=${idzhi2}`)
            xhrdel2.send()
            xhrdel2.onreadystatechange = function () {
                if (xhrdel2.status === 200 && xhrdel2.readyState === 4) {
                    console.log(xhrdel2.responseText)
                    window.confirm('删除成功')
                    location.reload()

                }
            }
        })
        //获得发表评论   添加发表功能并显示在桌面上
        var textarea = document.querySelector('textarea')
        //  console.log(textarea)
        var submit = document.querySelector('#submit')
        console.log(submit)
        if (textarea.value === "") {
            submit.disabled = true
        }
        //文本框输入  解锁提交按钮
        textarea.oninput = function () {
            if (textarea.value === '') {
                submit.disabled = true
            }
            else { submit.disabled = false }
            console.log(textarea.value)
        }
        //按钮点击添加评论
        submit.onclick = function () {
            console.log(textarea.value)
            var y = window.prompt()
            if (!y) {
                return
            }
            else {
                var obj = { content: textarea.value, name: y }
                console.log(obj)
                var xhrs = new XMLHttpRequest()
                xhrs.open('post', 'http://chst.vip:1902/students/addlist')
                xhrs.setRequestHeader('content-type', 'application/json')
                xhrs.send(JSON.stringify(obj))
                xhrs.onreadystatechange = function () {
                    if (xhrs.status === 200 && xhrs.readyState === 4) {
                        console.log(xhrs.responseText)
                        window.confirm('添加成功')
                        location.reload()
                    }
                }
            }

        }

    }

}

